<template>
    <div>
        <div v-for="item in orders" style="margin: 10px;border-radius: 5px;background-color: #fff;padding: 15px 0;">
            <div class="container-fluid">
                <div class="row" style="margin-bottom: 15px;position: relative">
                    <div class="col-xs-6">订单号:{{item.order_no}}</div>
                    <div class="col-xs-6"><span
                        style="position: absolute;right: 0;background-color: rgb(238, 238, 238);border-radius: 12px 0 0 12px;line-height: 24px;padding-left: 16px;">状态:{{item.collection_status_text}}</span>
                    </div>
                </div>
                <div class="row" style="margin-bottom: 15px;">
                    <div class="col-xs-6">
                        <img style="width: 100%;" :src="item.collection_image">
                    </div>
                    <div class="col-xs-6" style="text-align: right;">
                        <p style="color: gray">时间:{{item.order_time}}</p>
                        <p style="color: rgb(214, 111, 84);"><span class="label label-warning"
                                                                   style="margin-right: 5px;">字画墨宝</span>{{item.collection_name}}</p>
                        <p><span style="color: rgb(214, 111, 84);font-weight: bold;font-size: 16px;">￥{{item.collection_price}}</span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <button
                            @click="pickup(item)"
                            style="border: none;background-color: rgb(214, 111, 84);color: #fff;text-align: center;border-radius: 5px;line-height: 30px;">
                            提取货物
                        </button>
                    </div>
                    <div class="col-xs-6" style="text-align: right">
                        <!--                        todo-->
                        <!--                        <p style="font-weight: bold;font-size: 16px;">立即委托</p>-->
                        <button
                            @click="consign(item)"
                            style="border: none;background-color: rgb(214, 111, 84);color: #fff;text-align: center;border-radius: 5px;line-height: 30px;">
                            立即委托
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div v-show="isShowConsign" style="position: absolute;left:0;top:50px;background-color: rgba(0,0,0,.3);width: 100%;height: 100%;">
            <div style="position:absolute;top:50%;left:10%;width: 80%;transform:translateY(-50%);background-color: #fff;border-radius: 15px;">
                <div style="padding: 15px 0;border-bottom: 1px solid #eee;text-align: center;font-weight: bold;font-size: 16px;">支付委托手续费</div>
                <div style="padding: 15px;font-weight: bold;font-size: 16px;">
                    根据《委托托管规定》，您在专拍前需要支付委托托管佣金，支付前请确认如下信息:
                </div>
                <div class="container-fluid">
                    <div class="row" style="padding-bottom: 15px;">
                        <div class="col-xs-6" style="font-size: 16px;">增长幅度</div>
                        <div class="col-xs-6" style="text-align: right">
                            <select name="rise" style="width: 50%;" @change="setRise" v-model="riseVal">
                                <option v-for="v in rise" :value="v">{{v}}%</option>
                            </select>
                        </div>
                    </div>
                    <div class="row" style="padding-bottom: 15px;">
                        <div class="col-xs-6" style="font-size: 16px;">购买单价为:</div>
                        <div class="col-xs-6" style="font-size: 16px;text-align: right">￥{{commission.purchase_price}}</div>
                    </div>
                    <div class="row" style="padding-bottom: 15px;">
                        <div class="col-xs-6" style="font-size: 16px;">转卖单价为:</div>
                        <div class="col-xs-6" style="font-size: 16px;text-align: right">￥{{commission.resell_price}}</div>
                    </div>
                    <div class="row" style="padding-bottom: 15px;">
                        <div class="col-xs-6" style="font-size: 16px;">您的委托托管费:</div>
                        <div class="col-xs-6" style="font-size: 16px;text-align: right">￥{{commission.commission_price}}</div>
                    </div>
                </div>
                <div style="text-align: center">
                    <p>支付宝付款二维码</p>
                    <p style="font-size: 16px;">立即打开支付宝付款</p>
                    <img :src="pay_code" id="ali_qrcode_pay" style="width:60%;" />
                    <p></p>
                    <p>(支付宝扫描，长按识别，或点击上方链接支付)</p>
                </div>
                <div @click="closeConsign" style="text-align: center;border-top: 1px solid #eee;padding: 15px 0;">
                    关闭
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    import qr from 'qrcode';
    import swal from "sweetalert";
    export default {
        name: 'TabOrderWarehouse',
        components: {},
        data() {
            return {
                isShowConsign: false,
                orders: [
                    // {
                    //     id: '',
                    //     order_price: '',
                    //     order_time: '',
                    //     order_no: '',
                    //     agent_name: '',
                    //     agent_contract: '',
                    //     collection_name: '',
                    //     collection_status_text: '',
                    // }
                ],

                // rise: [5, 4, 3, 2, 1, 0, -1, -2, -3, -4, -5],
                rise: {},

                riseVal: 0,
                orderId: 0,
                pay_code: '',

                commission: {
                    purchase_price: 0.00,
                    resell_price: 0.00,
                    commission_price: 0.00,
                }
            }
        },
        created() {
        },
        mounted() {
            this.getOrders();
            this.getRise();
        },
        methods: {

            getOrders() {
                let that = this;
                this.api.getOrders(0).then(res => {
                    if (res.data) {
                        that.orders = res.data;
                    }
                })
            },
            getRise() {
                let that = this;
                this.api.getRise().then(res => {
                    if (res.data) {
                        that.rise = res.data;
                    }
                })
            },
            setRise() {
                let that = this;
                this.api.postCommission(that.orderId, that.riseVal).then(res => {
                    if (res.data) {
                        that.commission = res.data;
                        qr.toDataURL(that.globalData.HOTS + '/pay/' + res.data.code).then(url => {
                            that.pay_code = url;
                        });
                    }
                });
            },
            consign(item) {
                if (item.collection_status == 3) {
                    swal('藏品正在委托中');
                    return;
                }
                let that = this;
                that.orderId = item.id;
                that.riseVal = 0;
                this.api.postCommission(that.orderId, that.riseVal).then(res => {
                    if (res.meta.code != '000') {
                        swal(res.meta.msg);
                        return;
                    }
                    if (res.data) {
                        that.isShowConsign = !that.isShowConsign;
                        that.commission = res.data;
                        qr.toDataURL(that.globalData.HOTS + '/pay/' + res.data.code).then(url => {
                            that.pay_code = url;
                        });
                    }
                });
            },
            closeConsign() {
                this.isShowConsign = !this.isShowConsign;
            },
            pickup(item) {
                if (item.collection_status == 3) {
                    swal('藏品正在委托中');
                    return;
                }
                window.location.href = '/address/' + item.id
            }
        },
    }
</script>
<style scoped>


</style>
